<template xmlns:el-col="http://www.w3.org/1999/xhtml">
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 用户列表
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                    <span style="font-size: 14px;font-family: Consolas">&nbsp;用户名称：</span>
                    <el-input style="width: 150px" v-model="pagination.nickName" placeholder="用户名称" class="handle-input mr10"></el-input>

                <span style="font-size: 14px;font-family: Consolas">&nbsp;&nbsp;&nbsp;所在地区：</span>
                <el-select v-model="valueProvince"
                           placeholder="请选择省"
                           @change="changeProvince">
                    <el-option
                            v-for="item in provinceList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <span style="padding-left: 5px">
                <el-select v-model="valueCity"
                           placeholder="请选择市"
                           @change="changeCity">
                    <el-option
                            v-for="item in cityOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                    </span>
                <span style="padding-left: 5px">
                <el-select v-model="valueOrigin"
                           placeholder="请选择区"
                           @change="changeOrigin">
                    <el-option
                            v-for="item in originOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                </span>
                <span style="padding-top:20px;font-size: 14px;font-family: Consolas">&nbsp;&nbsp;&nbsp;注册时间：
                <span class="block">
                    <span class="demonstration"></span>
                    <el-date-picker
                            v-model="value1"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期" @change="dateChange" value-format="yyyy/MM/dd">
                    </el-date-picker>
                </span>
                </span>

                    <div style="padding-top:20px;font-size: 14px;font-family: Consolas">&nbsp;用户身份：
            <span>
            <el-select v-model="pagination.role" placeholder="请选择">
                <el-option
                    v-for="item1 in options1"
                    :key="item1.value1"
                    :label="item1.label1"
                    :value="item1.value1">
                </el-option>
            </el-select>
            </span>
                        <span style="padding-left: 10px"><el-button type="primary" icon="el-icon-search" @click="findPage()">搜索</el-button></span>
                    </div>













                <!--<el-button
                        type="primary"
                        icon="el-icon-delete"
                        class="handle-del mr10"
                        @click="delAllSelection"
                >批量删除</el-button>
                <el-select v-model="query.address" placeholder="地址" class="handle-select mr10">
                    <el-option key="1" label="广东省" value="广东省"></el-option>
                    <el-option key="2" label="湖南省" value="湖南省"></el-option>
                </el-select>-->

                <!--<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>-->
            </div>
            <el-table
                    :data="dataList"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    @selection-change="handleSelectionChange"
            >
                <el-table-column prop="user_id" label="用户ID" width="160" align="center"></el-table-column>
                <el-table-column prop="nickName" label="用户名称" align="center" ></el-table-column>
                <el-table-column prop="tel" label="手机号" align="center" ></el-table-column>

                <el-table-column prop="country,province,city" label="所在地区" align="center" >
                    <template slot-scope="scope"> {{scope.row.country}}{{scope.row.province}}{{scope.row.city}} </template>
                </el-table-column>

                <el-table-column prop="integral" label="积分" align="center" ></el-table-column>
                <el-table-column prop="create_time" label="注册时间" align="center" ></el-table-column>


                <!--<el-table-column label="账户余额">
                    <template slot-scope="scope">￥{{scope.row.money}}</template>
                </el-table-column>
                <el-table-column label="头像(查看大图)" align="center">
                    <template slot-scope="scope">
                        <el-image
                                class="table-td-thumb"
                                :src="scope.row.thumb"
                                :preview-src-list="[scope.row.thumb]"
                        ></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="地址"></el-table-column>
                <el-table-column label="状态" align="center">
                    <template slot-scope="scope">
                        <el-tag
                                :type="scope.row.state==='成功'?'success':(scope.row.state==='失败'?'danger':'')"
                        >{{scope.row.state}}</el-tag>
                    </template>
                </el-table-column>

                <el-table-column prop="date" label="注册时间"></el-table-column>-->
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                icon="el-icon-edit"
                                @click="handleEdit(scope.$index, scope.row)"
                        >发送消息</el-button>
                        <!--<el-button
                                type="text"
                                icon="el-icon-delete"
                                class="red"
                                @click="handleDelete(scope.$index, scope.row)"
                        >删除</el-button>-->
                    </template>
                </el-table-column>
            </el-table>
            <!--<div class="pagination">
                <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="query.pageIndex"
                        :page-size="query.pageSize"
                        :total="pageTotal"
                        @current-change="handlePageChange"
                ></el-pagination>
            </div>-->

            <div class="pagination-container" style="padding-top: 20px">
                <el-pagination
                        class="pagiantion"
                        background
                        @current-change="handleCurrentChange"
                        :current-page="pagination.pageIndex"
                        :page-size="pagination.pageSize"
                        layout="total, prev, pager, next, jumper"
                        :total="pagination.total">
                </el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
            <el-form ref="form" :model="form" label-width="70px">
                <el-form-item label="用户名">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="form.address"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>


    </div>
</template>

<script>
    import { fetchData } from '../../../api/index';
    export default {
        name: 'basetable',
        data() {
            return {
                query: {
                    address: '',
                    name: '',
                    pageIndex: 1,
                    pageSize: 10
                },
                dataList:[],
                tableData: [],
                multipleSelection: [],
                delList: [],
                editVisible: false,
                pageTotal: 0,
                form: {},
                idx: -1,
                id: -1,
                pagination: {//分页相关模型数据
                    pageIndex: 1,//当前页码
                    pageSize: 5,//每页显示的记录数
                    total: 0,//总记录数
                    nickName: null,
                    address:null,
                    startTime:null,    //开始时间
                    endTime:null,
                    role:null
                },



                provinceList: [], // 省列表
                cityList: [], // 市列表
                originList: [], // 区列表
                valueProvince: '', // 所选的省
                valueCity: '', // 所选的市
                valueOrigin: '', // 所选的区
                cityOptions: [], // 市下拉框数据
                originOptions: [], // 区下拉框数据
                indexProvince:0,
                indexCity:0,
                value1:'',
                options1: [{
                    value1: 'all',
                    label1: '全部'
                }, {
                    value1: '普通用户',
                    label1: '普通用户'
                }, {
                    value1: '退役士兵',
                    label1: '退役士兵'
                }, {
                    value1: '未授权',
                    label1: '未授权'
                }],
            };
        },
        created() {
            //this.getData();
            this._getJsonData();
            //this.getUserList();
            this.findPage();
        },
        methods: {
            //查询user列表
            /*getUserList(){
                this.axios.get("http://localhost:12005/user/getUserList").then((res)=>{
                    this.dataList=res.data.data;
                })
            },*/

            //根据条件查询并分页
            findPage(){
                this.dateChange();
                var param = {
                    pageIndex: this.pagination.pageIndex,
                    pageSize: this.pagination.pageSize,
                    nickName: this.pagination.nickName,
                    address:this.pagination.address,
                    startTime:this.pagination.startTime,
                    endTime:this.pagination.endTime,
                    role:this.pagination.role

                };
                this.axios.get("http://119.23.214.90:12005/user/findByPage?pageIndex=" + param.pageIndex + "&pageSize=" + param.pageSize + "&nickName=" + param.nickName +"&address="+param.address+"&startTime="+param.startTime+"&endTime="+param.endTime).then((res) => {
                    this.pagination.total = res.data.data.totalData;
                    this.dataList = res.data.data.data;
                })
            },


            //时间控件，获取时间
            dateChange(val) {
                if(val==null){
                    this.startTime=null;
                    this.endTime=null;
                }else{
                    this.pagination.startTime = val.toString().split(",")[0];
                    this.pagination.endTime = val.toString().split(",")[1];
                    alert(this.pagination.startTime);
                    alert(this.pagination.endTime);
                }
            },

            handleCurrentChange(pageIndex) {
                //设置最新的页码
                this.pagination.pageIndex = pageIndex;
                //重新调用findPage方法进行分页查询
                this.findPage();
            },

            //获取省市区
            changeProvince(val) {
                this.provinceList.forEach((province, index) => {
                    if (val.toString() === this.provinceList[index].value) {
                        this.indexProvince=index;
                        this.cityOptions = this.provinceList[index].children
                        this.valueCity = this.provinceList[index].children[0].value
                        this.originOptions = this.provinceList[index].children[0].children
                        this.valueOrigin = this.provinceList[index].children[0].children[0].value

                        this.pagination.address=this.provinceList[index].label+"/"+this.provinceList[index].children[0].label+"/"+this.provinceList[index].children[0].children[0].label;
                    }
                })
            },
            // 选择市
            changeCity(val) {
                this.cityList.forEach((city, index) => {
                    if (val.toString() === this.cityList[index].value) {
                        this.indexCity=index;
                        this.originOptions = this.cityList[index].children
                        this.valueOrigin = this.cityList[index].children[0].value
                        this.pagination.address=this.provinceList[this.indexProvince].label+"/"+this.cityList[index].label+"/"+this.cityList[index].children[0].label;
                        //alert("市:"+this.pagination.address)
                    }
                })
            },
            // 选择区
            changeOrigin(val) {
                this.originList.forEach((origin,index)=>{
                        if(val.toString() === this.originList[index].value) {
                            if(this.provinceList[this.indexProvince].label==="全部"){
                                this.pagination.address=this.provinceList[this.indexProvince].label+"/"+this.provinceList[this.indexProvince].children[0].label+"/"+this.originList[index].label;
                            }else{
                                //没有切换市
                                this.pagination.address=this.provinceList[this.indexProvince].label+"/"+this.provinceList[this.indexProvince].children[0].label+"/"+this.originList[index].label;
                                //切换了市
                                let address=this.provinceList[this.indexProvince].label+"/"+this.cityList[this.indexCity].label+"/"+this.originList[index].label;
                                alert(address);
                            }
                            alert(this.pagination.address)
                        }
                    })
                },
            _getJsonData() {
                this.axios.get('./china_address.json').then((res) => {
                    this.provinceList = []
                    this.cityList = []
                    this.originList = []
                    res.data.forEach((item) => {
                        if (item.value.match(/0000$/)) {
                            this.provinceList.push({
                                value: item.value,
                                label: item.name,
                                children: []
                            })
                        } else if (item.value.match(/00$/)) {
                            this.cityList.push({
                                value: item.value,
                                label: item.name,
                                children: []
                            })
                        } else {
                            this.originList.push({
                                value: item.value,
                                label: item.name
                            })
                        }
                    })
                    for (let index in this.provinceList) {
                        for (let index1 in this.cityList) {
                            if (this.provinceList[index].value.slice(0, 2) === this.cityList[index1].value.slice(0, 2)) {
                                this.provinceList[index].children.push(this.cityList[index1])
                            }
                        }
                    }
                    for(let item1 in this.cityList) {
                        for(let item2 in this.originList) {
                            if (this.originList[item2].value.slice(0, 4) === this.cityList[item1].value.slice(0, 4)) {
                                this.cityList[item1].children.push(this.originList[item2])
                            }
                        }
                    }
                })
            },





























            // 获取 easy-mock 的模拟数据
            getData() {
                fetchData(this.query).then(res => {
                    console.log(res);
                    this.tableData = res.list;
                    this.pageTotal = res.pageTotal || 50;
                });
            },
            // 触发搜索按钮
            handleSearch() {
                this.$set(this.query, 'pageIndex', 1);
                this.getData();
            },
            // 删除操作
            handleDelete(index, row) {
                // 二次确认删除
                this.$confirm('确定要删除吗？', '提示', {
                    type: 'warning'
                })
                    .then(() => {
                        this.$message.success('删除成功');
                        this.tableData.splice(index, 1);
                    })
                    .catch(() => {});
            },
            // 多选操作
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            delAllSelection() {
                const length = this.multipleSelection.length;
                let str = '';
                this.delList = this.delList.concat(this.multipleSelection);
                for (let i = 0; i < length; i++) {
                    str += this.multipleSelection[i].name + ' ';
                }
                this.$message.error(`删除了${str}`);
                this.multipleSelection = [];
            },
            // 编辑操作
            handleEdit(index, row) {
                this.idx = index;
                this.form = row;
                this.editVisible = true;
            },
            // 保存编辑
            saveEdit() {
                this.editVisible = false;
                this.$message.success(`修改第 ${this.idx + 1} 行成功`);
                this.$set(this.tableData, this.idx, this.form);
            },
            // 分页导航
            handlePageChange(val) {
                this.$set(this.query, 'pageIndex', val);
                this.getData();
            }
        }
    };
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
    .red {
        color: #ff0000;
    }
    .mr10 {
        margin-right: 10px;
    }
    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }
</style>
